<script setup lang="ts">
// 导入路由组件
import { RouterLink, RouterView } from 'vue-router'
// 导入异步组件定义函数
import { defineAsyncComponent } from 'vue'
// 使用动态导入方式解决HelloWorld组件导入问题
</script>

<template>
  <div class="app-container">
    <!-- 主内容区域 -->
    <!-- <div class="content-area"> -->
      <!-- 路由视图出口 -->
      <!-- 222 -->
      <RouterView />
    <!-- </div> -->

    <!-- 底部导航栏 -->
    <footer class="tabbar">
      <RouterLink to="/home" class="tab-item">
        <div class="tab-icon">🏠</div>
        <div class="tab-text">主页</div>
      </RouterLink>

      <RouterLink to="/cart" class="tab-item">
        <div class="tab-icon">🛒</div>
        <div class="tab-text">购物车</div>
      </RouterLink>

      <RouterLink to="/chat" class="tab-item">
        <div class="tab-icon">💬</div>
        <div class="tab-text">聊天</div>
      </RouterLink>

      <RouterLink to="/main" class="tab-item">
        <div class="tab-icon">👤</div>
        <div class="tab-text">我的</div>
      </RouterLink>
    </footer>
  </div>
</template>

<style scoped>
/* 应用容器 */
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  position: relative;
  box-sizing: border-box;
}

/* 内容区域 */
.content-area {
  flex: 1;
  overflow: hidden; /* 修改为hidden防止主滚动条 */
  height: 100vh; /* 使用100vh而不是减去底部导航栏的高度 */
  position: relative;
  width: 100%;
  padding-bottom: 0; /* 移除额外的padding */
  box-sizing: border-box;
  margin-bottom: 0; /* 移除底部margin */
}

/* 底部导航栏 */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 60px;
  display: flex;
  background-color: #ffffff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  z-index: 1; /* 保持较低的z-index，但在聊天详情页下方 */
  padding: 0;
  margin: 0;
}

/* 导航项 */
.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: #999;
  transition: color 0.3s;
}

/* 激活的导航项 */
.tab-item.router-link-active {
  color: #3498db;
}

/* 导航图标 */
.tab-icon {
  font-size: 24px;
  margin-bottom: 2px;
}

/* 导航文本 */
.tab-text {
  font-size: 12px;
}

.carousel {
  width: 90%;
  margin: 0 auto 18px auto;
  height: 180px; /* 或你想要的高度 */
  background: #e5e5e5;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

.carouselImg {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  cursor: grab;
  user-select: none;
}

.carouselTrack {
  display: flex;
  height: 100%;
  will-change: transform;
}

.slideImage {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* 保证图片不变形，铺满容器 */
  flex-shrink: 0;
  border-radius: 20px;
  transition: opacity 0.3s;
  background: #e5e5e5;
}

.dragging {
  cursor: grabbing !important;
}
</style>
